/*
* @Author: sam
* @Date:   2017-10-18 09:49:10
* @Last Modified by:   sam
* @Last Modified time: 2017-10-27 17:20:18
*/
;(function(win){
	var Viewer = function(opts){
		var configs = {
			'imagelist' : [],
			'status' : {
				'index' : 0
			},
			'eventType' : 'click'
		};
		for(var i in opts){
			configs[i] = opts[i];
		}
		this.configs = configs;
		this.init.call(this);
	};

	Viewer.prototype = {
		init : function(opts){
			//初始化状态及相关数据
			this.initStatus.call(this,this.configs.status);

			//初始化dom节点
			this.initDoms();

			//绑定事件
			this.bindEvent();
			console.log(this);
		},
		bindEvent : function(){
			var that = this;
			//点击事件绑定
			this.clickDoms = document.querySelectorAll(this.configs.bindDom);
			for(var i = 0; i< this.clickDoms.length; i++){
				(function(n){
					that.clickDoms[n].addEventListener(that.configs.eventType,function(e){
						that.status.touchTag = true;
						that.setTouchBoxDom();
						that.showAnimate(n);
					},false);
				})(i);
			}

			this.doms.touchBox.addEventListener('click', function(e){
				that.status.touchEvent = {};
				that.status.touchTag = false;
				that.close();
			},false);

			//手势事件绑定
			this.doms.touchBox.addEventListener('touchstart',function(e){
				that.status.touchEvent.sX = e.touches[0].clientX;
				that.status.touchEvent.sY = e.touches[0].clientY;
			}, false);

			this.doms.touchBox.addEventListener('touchmove',function(e){
				e.preventDefault();
				that.status.touchEvent.mX = e.touches[0].clientX;
				that.status.touchEvent.mY = e.touches[0].clientY;
				that.touchMovePos();
			}, false);

			this.doms.touchBox.addEventListener('touchend',function(e){
				that.status.touchEvent.eX = e.changedTouches[0].clientX;
				that.status.touchEvent.eY = e.changedTouches[0].clientY;
				that.status.touchTag = false;
				that.touchMoveEnd();
			}, false);

		},
		initDoms : function(){
			var dom,img;
			this.doms = {};
			this.doms.html = document.querySelector('html');
			this.doms.viewBox = document.createElement('div');
			this.doms.viewBox.className = 'viewBox hide';

			this.doms.contentBox = document.createElement('div');
			this.doms.contentBox.className = 'contentBox';
			this.doms.touchBox = document.createElement('div');
			this.doms.touchBox.className = 'touchBox';
			this.doms.touchPosBox = document.createElement('div');
			this.doms.touchPosBox.className = 'touchPosBox';
			this.doms.touchBoxMembers = [];
			for(var i = 0; i < this.configs.imagelist.length ; i++){
				dom = document.createElement('div');
				dom.style.width = this.status.screenWidth + 'px';
				img = document.createElement('img');
				img.src = this.configs.imagelist[i]["src"];
				dom.appendChild(img);
				this.doms.touchBoxMembers.push(dom);
				this.doms.touchPosBox.appendChild(dom);
			}
			this.doms.numBox = document.createElement('div');
			this.doms.numBox.className = 'numBox';
			this.doms.numBoxUl = document.createElement('ul');
			this.doms.numBoxLiMembers = [];
			for(var i = 0; i < this.configs.imagelist.length ; i++){
				dom = document.createElement('li');
				if(i === this.status.index){
					dom.className = 'hover';
				}
				this.doms.numBoxLiMembers.push(dom);
				this.doms.numBoxUl.appendChild(dom);
			}
			this.doms.numBox.appendChild(this.doms.numBoxUl);
			this.doms.touchBox.appendChild(this.doms.touchPosBox);
			this.doms.contentBox.appendChild(this.doms.touchBox);
			this.doms.contentBox.appendChild(this.doms.numBox);
			this.doms.viewBox.appendChild(this.doms.contentBox);
			document.body.appendChild(this.doms.viewBox);
		},
		initStatus : function(status){
			this.status = status;
			this.status.screenWidth = window.screen.width;
			this.status.screenHeight = window.screen.height;
			this.status.touchDivMar = 20;
			this.status.touchDownY = -80;
			this.status.touchDownX = 20;
			this.status.animateTime = 200;
			this.status.touchEvent = {};
			this.status.touchTag = true;
			this.status.length = this.configs.imagelist.length;
		},
		setTouchBoxDom : function(){
			var that = this;
			this.doms.touchPosBox.style.width = this.status.screenWidth*this.status.length + this.status.touchDivMar * (this.status.length-1) + 'px';
			this.doms.touchPosBox.style.left = -(this.status.screenWidth*this.status.index + this.status.index*this.status.touchDivMar) + 'px';
		},
		showAnimate : function(index){
			var that = this;
			this.removeHover(this.status.index);
			this.status.index = index;
			this.addHover(this.status.index);
			this.doms.html.className = 'oh';
			this.doms.viewBox.classList.remove('hide');
			this.status.touchEvent = {};
			this.movePosBox();
		},
		touchMovePos : function(){
			this.doms.touchPosBox.style.left = -(this.status.screenWidth*this.status.index) + (this.status.touchEvent.mX - this.status.touchEvent.sX) + 'px';
		},
		touchMoveEnd : function(){
			//如果是像右移动
			if(this.status.touchEvent.sX - this.status.touchEvent.eX < 0){
				if(Math.abs(this.status.touchEvent.sX - this.status.touchEvent.eX) > Math.round(this.status.screenWidth/4)){
					if(this.status.index !== 0){
						this.removeHover(this.status.index);
						this.status.index--;
						this.addHover(this.status.index);
					}
				}
			}else{//如果是像左移动
				if(Math.abs(this.status.touchEvent.sX - this.status.touchEvent.eX) > Math.round(this.status.screenWidth/4)){
					if(this.status.index !== this.status.length-1){
						this.removeHover(this.status.index);
						this.status.index++;
						this.addHover(this.status.index);
					}
				}
			}
			this.status.touchEvent = {};
			this.movePosBox();

		},
		movePosBox : function(){
			var that = this;
			this.doms.touchPosBox.style.left = -(this.status.screenWidth*this.status.index + this.status.touchDivMar*this.status.index) + 'px';
			window.setTimeout(function(){
				that.status.touchTag = true;
			},this.status.animateTime);
		},
		removeHover : function(index){
			this.doms.numBoxLiMembers[index].className = "";
		},
		addHover : function(index){
			this.doms.numBoxLiMembers[index].className = "hover";
		},
		close : function(){
			var that = this;
			window.setTimeout(function(){
				that.doms.html.className = '';
				that.doms.viewBox.classList.add('hide');
			},0);
		}
	};

	win.Class = win.Class || {};
	win.Class.Viewer = Viewer;
})(window);